<template>
  <el-table :data="detail" border style="width: 100%">
    <el-table-column label="编号" type="index" width="120">
      <template #default="scope">
        <div class="userinfo">
          {{ scope.$index + 1 }}
          <el-tag v-if="scope.row.isHistoryData == 0" class="mr-10px" type="info">历史数据</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="tabs_name" label="分类" show-overflow-tooltip />
    <el-table-column prop="name" label="人员名称" min-width="200" show-overflow-tooltip>
      <!-- 主要人员 -->
      <template #default="scope">
        <div class="userinfo">
          <span>{{ scope.row.name }}</span>
        </div>

        <!-- 股东角色 -->
        <div v-if="scope.row.labels">
          <template :key="index" v-for="(tag, index) in scope.row.labels">
            <el-tag
              v-if="tag.text"
              size="small"
              class="mr-10px mt-10px"
              :type="tag.text && tagMap[tag.text[0]]"
            >
              {{ tag.text }}
            </el-tag>
          </template>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="职务" show-overflow-tooltip />
    <el-table-column prop="gender" label="性别" show-overflow-tooltip />
    <el-table-column prop="educationLevel" label="学历" show-overflow-tooltip />
    <el-table-column prop="shareHoldQuantity" label="持股数量(股)" show-overflow-tooltip />
    <el-table-column prop="subRatio" label="持股比例" show-overflow-tooltip />
    <el-table-column prop="subMoney" label="认缴出资额" show-overflow-tooltip />
  </el-table>
</template>

<script setup lang="ts">
import tagMap from './tagMap.json'
const props = defineProps({
  detail: Array
})
const strToArr = (str) => {
  return str.length ? str.split(',') : []
}
</script>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  justify-content: space-between;
}
</style>
